<template>
  <div> 
    <el-card class="box-card">
      <div slot="header" style="text-align: center;font-weight:bold;font-size:18px;"> 
        <span style="white-space: pre-wrap;">{{title}}</span> 
      </div>
      <div v-if="imgUrl !== ''" class="box-right">
        <el-image 
          :src="imgUrl"  
          style="max-width: 480px; height: 270px"
          :preview-src-list="[imgUrl]"
        />
      </div>

      <div v-if="imgUrl !== ''" class="box-left">
        <h2>TIME:   {{create_date}}</h2>
        <span style="white-space: pre-wrap;">{{synopsis}}</span>
      </div>
      <div v-else class="box-nopic">
        <h2>TIME:   {{create_date}}</h2>
        <span style="white-space: pre-wrap;">{{synopsis}}</span>
      </div>


    </el-card>

  </div>
</template>

<script>
export default {
  props: {
    title: {type:String},
    create_date: {type:String},
    imgUrl: {type:String,default:""},
    synopsis: {type:String},
  }

  

}
</script>

<style lang="less" scoped>
  /deep/.el-card{ border-radius: 10px;margin: 10px 0px;}
  /deep/.el-card__header{ padding: 10px 20px;}
  
  .box-left{
    h2 {text-align: center; font-size:16px;margin-top: -20px;}
    font-size:16px;
    // text-indent:2em; 
    text-align: left;
    width: 700px;
    font-family: 'source sans pro',arial, sans-serif;
  }
  .box-nopic{
    h2 {text-align: center; font-size:16px;margin-top: -20px;}
    font-size:16px;
    // text-indent:2em; 
    text-align: left;
    // width: 400px;
  }
  .box-right{
    float:right; margin-top: -15px;
  }
</style>
